<template>
  <div>
    <!-- <div style="display: flex;justify-content: center;">
      <el-button type="success" :icon="Bell">24年录取数据陆续整理上传中，预计6月份更新完成</el-button>
    </div> -->
    <div class="score mohu" style="margin-top: 20px;">
      <el-table
        v-loading="loading"
        element-loading-text="数据加载中"
        empty-text="暂无数据，请重新选择条件查询"
        :data="tableData"
        style="width: 100%; min-height: 280px"
      >
        <el-table-column prop="ssnf" label="年份" width="180" />
        <el-table-column prop="total" label="总招生人数" />
        <el-table-column prop="yzylqrs" label="一志愿人数" />
        <el-table-column prop="tjrs" label="调剂人数" />
      </el-table>
      <div v-if="isUnlock" class="mohu-filter">
        <el-button type="success" @click="onUnlock">
          <el-icon class="el-icon--right"><Key /></el-icon> <span>解锁</span>
        </el-button>
      </div>
    </div>
    <div class="tips">
      注：招生人数基于录取名单统计，并非计划招生人数（PS:实际录取人数一般大于计划招生人数）
    </div>
  </div>
</template>
<script setup>
import {
  Bell,
} from "@element-plus/icons-vue";
import { ref, onMounted, defineProps } from "vue";
import { scoreAnalysis } from "@/api/api";
import { decrypt } from "@/utils/parseDate";
import { defineEmits } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const emit = defineEmits(["onChange"]);
// 点击解锁
function onUnlock() {
  emit("onChange", { isUnlock: true });
}
const tableData = ref([]);
const props = defineProps({
  majorId: String,
});
const loading = ref(false);
// 是否显示模糊效果
const isUnlock = ref(false);
async function getScoreAnalysis() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await scoreAnalysis(data);
    const res = JSON.parse(decrypt(result));
    console.log(res);
    if (res.status == 8) {
      store.commit("setTipsDialog", true);
    }
    if (res.status == 9) {
      store.commit("setNumberDialog", true);
    }
    if (res.status == 666) {
      ElMessage({
        message: res.msg,
        type: "warning",
        showClose: true,
      });
      isUnlock.value = true;
      emit("onChange", { isUnlock: true });
      tableData.value = [
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          total: "请解锁查看",
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
        },
      ];
    }
    if (res.status === 0) {
      isUnlock.value = false;
      res.result.forEach((ele) => (ele.total = ele.yzylqrs + ele.tjrs));
      tableData.value = res.result.reverse();
    }
    loading.value = false;
  } catch (error) {
    // throw new Error(error)
  }
}
// 将 myMethod 暴露给父组件
defineExpose({ childMethod });
function childMethod() {
  getScoreAnalysis();
}
onMounted(() => {
  getScoreAnalysis();
});
</script>
<style lang="less" scoped>
.tips{
  font-size: 14px;
  margin-top: 20px;
  color: red;
}
.mohu {
  position: relative;
  z-index: 9;
}

.mohu-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
